'use client'
import React, { useState, useEffect } from 'react'
import './index.scss'
import keyStore from '@/app/store/key'
import { Getparameters } from '@/app/api/agent-key/index'


interface PromptProps {
    setData: (vlaue: string) => void
}

interface Prompt {
    opening_statement?: string,
    suggested_questions?: string[]
}

const Prompt: React.FC<PromptProps> = ({ setData }) => {

    const { key } = keyStore()
    const [prompt, setPrompt] = useState<Prompt>({})
    useEffect(() => {
        Getparameters(key).then((res: any) => {
            setPrompt(res)
            console.log(res)
        }).catch((err) => { })
    }, [])


    return <div className='prompt'>
        <div className='prompttitle'>
            {prompt.opening_statement}
        </div>
        <div className='tryproblem'>
            {
                prompt && prompt.suggested_questions && prompt.suggested_questions.length != 0 && prompt.suggested_questions.map((item: any, index: number) => {
                    return <div className='tryproblemitem' onClick={() => { setData(item) }} key={index}>
                        {item}
                    </div>
                })
            }
        </div>
    </div>
}


export default Prompt